<template>
  <div class="look-down-wrap">
    <ul>
      <li @click="handleClick(2)">
        <i class="el-icon-picture"></i>
        <p><span v-show="txtShow">图片</span> {{ imgCount }}</p>
      </li>
      <li @click="handleClick(3)">
        <i class="el-icon-video-camera-solid"></i>
        <p><span v-show="txtShow">视频</span> {{ videoCount }}</p>
      </li>
      <li @click="handleClick(1)">
        <i class="el-icon-s-order"></i>
        <p><span v-show="txtShow">文本</span> {{ txtCount }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import {  setSession } from "@/utils/session";
export default {
  data() {
    return {
      txtShow: true,
      txtCount: 0,
      imgCount: 0,
      videoCount: 0,
    };
  },
  props: ["data","fileType"],
  mounted() {
    this.init();
  },
  methods: {
    handleClick(type){
      if(this.fileType){
        setSession("fileType", type)
      }
    },
    init() {
      if (this.data.count > 0) {
        this.txtCount = this.data.fileVOList.filter((v) => v.type == 1)[0].num;
        this.imgCount = this.data.fileVOList.filter((v) => v.type == 2)[0].num;
        this.videoCount = this.data.fileVOList.filter(
          (v) => v.type == 3
        )[0].num;
      }
    },
  },
};
</script>

<style scoped lang="scss" >
.look-down-wrap {
  display: inline-block;
  height: 24px;
  ul {
    li {
      float: left;
      line-height: 24px;
      margin-right: 25px;
      cursor: pointer;
      i {
        color: #666;
        font-size: 16px;
        float: left;
        margin-top: 5px;
        font-weight: bold;
        &.el-icon-picture {
          color: #f56c6c;
        }
        &.el-icon-video-camera-solid {
          color: #e6a23c;
        }
        &.el-icon-s-order {
          color: #67c23a;
        }
      }
      p {
        display: inline;
        margin-left: 4px;
        color: #666;
      }
    }
  }
}
@media screen and (max-width: 1400px) {
  .look-down-wrap ul li {
    margin-right: 8px;
  }
}
</style>